<!-- 所有弹出新增组织机构 封装 -->
<template>
  <div>
    <treeselect
      v-model="value"
      :options="dataList"
      :normalizer="normalizer"
      :placeholder="orgName"
      @select="changeOrgId"
      :clearable="clearable"
      @input="oninput"
      noChildrenText="加载中..."
      noOptionsText="暂无组织机构"
      noResultsText="无匹配数据"
      :appendToBody="true"
      z-index="9000"
      :disabled="disabled"
      class="custom-treeselect"
    />
  </div>
</template>

<script>
import { reqOrgList, reqOrgLevel } from "@/api/api";
import { transTree } from "@utils/trans-tree";
import treeselect from "@riophae/vue-treeselect";
import { LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect";
// import "@components/vue-treeselect.less";
// import "./vue-treeselect.less";
import "@components/vue-treeselect.less";
import { mapState } from "vuex";

export default {
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    orgName: {
      type: String,
      default: "请选择",
    },
    addtenantId: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "1,2,3",
    },
  },
  components: {
    treeselect,
  },
  data() {
    return {
      normalizer(node) {
        return {
          id: node.id,
          label: node.orgName,
          children: node.children,
        };
      },
      value: null,
      dataList: [],
    };
  },
  watch: {
    value(e) {
      if (e == "" || e == null) {
        this.$emit("handleClear");
      }
    },
  },
  computed: {
    ...mapState(["user", "spacesManage"]),
  },
  mounted() {
    // this.getDataList();
  },
  methods: {
    // 清空组织机构
    onclose() {
      this.value = null;
    },
    oninput(e) {
      if (e == "" || e == null) {
        this.$emit("onClear");
      }
    },
    resetFields() {
      this.value = null;
    },
    getValue(orgId) {
      this.value = orgId;
    },
    // 获取组织机构列表
    async getDataList(orgId = "") {
      var res = await reqOrgList({
        userId: this.user.userId,
        roleName: this.user.roleName,
        tenantId: !this.addtenantId ? this.user.tenantId : this.addtenantId,
        orgName: "",
        parentId: "",
        type: this.type,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let { rows } = res.data;
      this.dataList = transTree(rows); //返回全部数据

      if (orgId != "") {
        this.$emit("changeOrgId", {
          id: orgId,
          orgName: "",
          children: "",
        });
      }
      // else{
      //   this.$emit("changeOrgId", {
      //       id: this.dataList[0].id,
      //       orgName: this.dataList[0].orgName,
      //       children: this.dataList[0].children,
      //     });
      // }
    },
    // 树懒加载
    // loadOptions({ action, parentNode, callback }) {
    //   if (action === LOAD_CHILDREN_OPTIONS) {
    //     reqOrgList({
    //       userId: this.user.userId,
    //       roleName: this.user.roleName,
    //       tenantId: !this.addtenantId ? this.user.tenantId : this.addtenantId,
    //       orgName: "",
    //       parentId: parentNode.id,
    //        type:"1,2,3"
    //     }).then((res) => {
    //       if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
    //       let arr = [];
    //       for (let index of res.data.rows) {
    //         let chiledModeInfo = {};
    //         chiledModeInfo.address = index.address;
    //         chiledModeInfo.area = index.area;
    //         chiledModeInfo.city = index.city;
    //         chiledModeInfo.createTime = index.createTime;
    //         chiledModeInfo.hasChildren = index.hasChildren;
    //         chiledModeInfo.id = index.id;
    //         chiledModeInfo.children = null;
    //         chiledModeInfo.level = index.level;
    //         chiledModeInfo.orderNum = index.orderNum;
    //         chiledModeInfo.orgName = index.orgName;
    //         chiledModeInfo.parentId = index.parentId;
    //         chiledModeInfo.province = index.province;
    //         chiledModeInfo.status = index.status;
    //         chiledModeInfo.tenantId = index.tenantId;
    //         chiledModeInfo.updateTime = index.updateTime;
    //         chiledModeInfo.type = index.type;
    //         if (index.hasChildren != 1) {
    //           delete chiledModeInfo.children; //为末级的时候删掉children，就不会出现末级也有小箭头可以点
    //         }
    //         arr.push(chiledModeInfo);
    //       }
    //       parentNode.children = arr;
    //     });
    //     callback();
    //   }
    // },
    // 选择一条
    changeOrgId(instanceId) {
      this.$emit("changeOrgId", instanceId);
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .vue-treeselect__control {
  height: 32px;
  border: 1px solid @primaryBorder;
  box-sizing: border-box;
  color: @primaryContentTxt !important;
  background: @primaryHeaderBgcolor;
}

::v-deep .vue-treeselect__single-value {
  color: @primaryContentTxt !important;
}

/* 覆盖 treeselect 下拉框的字体颜色 */
// ::v-deep .treeselect__menu .treeselect__menu-item {
//   color: red !important;
// }

::v-deep .vue-treeselect__menu .vue-treeselect__option {
  color: #606266;
  /* 设置选项的字体颜色为蓝色 */
}

::v-deep .vue-treeselect__placeholder {
  color: @primaryThemeTxtColor;
  /* 设置占位符的字体颜色为灰色 */
}

::v-deep .vue-treeselect__control:hover {
  border: 1px solid @primaryBorder !important;
  /* 设置鼠标移入时的背景色为浅灰色 */
}

/* placeholder字体颜色 */
//   ::v-deep .vue-treeselect__placeholder {
//     color: @primaryTxtcolor2;
//   }

// 小箭头
::v-deep .vue-treeselect__control-arrow-container {
  display: none;
}

::v-deep .vue-treeselect__input-container {
  height: 32px !important;
  margin-top: 0 !important;
}

::v-deep .vue-treeselect {
  line-height: 40px;
  height: 40px;
  display: flex;
  align-items: center;
}

::v-deep .vue-treeselect--single .vue-treeselect__input {
  position: absolute;
  top: 0;
  height: 32px !important;
  left: 0;
}
::v-deep .custom-treeselect .vue-treeselect__placeholder {
  color: @primaryThemeTxtColor3 !important;
  font-size: 13px !important;
}
// ::v-deep .vue-treeselect__menu {
//   background: #024b8a !important;
//   border: rgba(8, 160, 255, 0.827) 1px solid !important;
// }

::v-deep .vue-treeselect--disabled .vue-treeselect__control {
  background-color: @primaryBanInputBg !important;
  color: #858585 !important;
}
</style>
